<nz-card [nzBodyStyle]="{padding:0}">
    <nz-tabset nzCentered [nzTabBarStyle]="{paddingLeft:'15px',paddingRight:'15px'}">
        <nz-tab nzTitle="Notification (4)">
          <ng-container *ngTemplateOutlet="notificationTpl"></ng-container>
        </nz-tab>
        <nz-tab nzTitle="Message (3)">
          <ng-container *ngTemplateOutlet="notificationTpl"></ng-container>
        </nz-tab>
        <nz-tab nzTitle="To do (4)">
          <ng-container *ngTemplateOutlet="notificationTpl"></ng-container>
        </nz-tab>
      </nz-tabset>

      <ng-template #notificationTpl>
        <nz-list nzItemLayout="horizontal">
         <nz-list-item *ngFor="let i of 4| numberLoop" >
            <nz-list-item-meta>
              <nz-list-item-meta-title>
                <div class="flex p-l-10 p-r-10">
                            <span nz-typography
                                  nzEllipsis
                                  class="flex-1">第三方紧急代码变更</span>
                  <nz-tag class="m-l-10" [nzColor]="'red'">马上到期</nz-tag>
                </div>
              </nz-list-item-meta-title>
              <nz-list-item-meta-description>
                <div class="p-l-10 p-r-10">
                  <p nz-typography nzType="secondary" nzEllipsis [nzEllipsisRows]="3">冠霖提交于 2022-04-15，需在 2022-04-15 前完成代码变更任务</p>
                  <p>审核时间：222</p>
                </div>
      
              </nz-list-item-meta-description>
            </nz-list-item-meta>
          </nz-list-item>
          <!-- 为空的时候 -->
          <!-- <nz-list-empty *ngIf="deptNoticeListObj.checkRecordDtos.length === 0"></nz-list-empty> -->
          <nz-list-footer>
            <div class="center operate-text full-with full-height">清空通知</div>
          </nz-list-footer>
        </nz-list>
      </ng-template>
</nz-card>
